<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Studio</title>
<style type="text/css">
#WORKBENCH {
	position: absolute;
	width: 500px;
	height: 500px;
	z-index: 1;
	left: 50px;
	top: 200px;
	background-color: #FFFFFF;
}
#MATERIAL {
	position: absolute;
	width: 400px;
	height: 350px;
	z-index: 2;
	left: 600px;
	top: 200px;
	background-color: #FFFFFF;
}
</style>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#Top {
	position: absolute;
	width: 1000px;
	height: 100px;
	z-index: 11;
	left: 0;
	top: 0;
}
#apDiv1 {
	position: absolute;
	width: 1000px;
	height: 50px;
	z-index: 0;
	left: 0px;
	top: 400px;
}
#Reset {
	position: absolute;
	width: 100px;
	height: 50px;
	z-index: 10;
	left: 600px;
	top: 600px;
	background: #000;
	line-height: 21px;
	color: #FFF;
	cursor: pointer;
	background-color: #000000;
}
#Complete {
	position: absolute;
	width: 100px;
	height: 50px;
	z-index: 10;
	left: 850px;
	top: 600px;
	background: #000;
	line-height: 21px;
	color: #FFF;
	cursor: pointer;
	background-color: #000000;
}
body {
	background-image: url();
	background-repeat: no-repeat;
}
#WB_TITLE {
	position: absolute;
	width: 500px;
	height: 2px;
	z-index: 11;
	left: 50px;
	top: 130px;
	color: #FFF;
}
#MW_TITLE {
	position: absolute;
	width: 400px;
	height: 50px;
	z-index: 12;
	left: 600px;
	top: 130px;
	color: #FFF;
}
#TITLE {
	position: absolute;
	width: 250px;
	height: 50px;
	z-index: 13;
	left: 400px;
	top: 0px;
	color: #FFF;
}
#TITLE h1 strong {
	font-family: "Courier New", Courier, monospace;
}
#BACKGROUND {
	position: absolute;
	width: 1050px;
	height: 820px;
	z-index: 0;
	top: 0;
	left: 0;
	visibility: visible;
	background-repeat: no-repeat;
	background-image: url(picture/20071129134747321_2.jpg);
}
#INFORMATION {
	position: absolute;
	width: 1050px;
	height: 300px;
	z-index: 14;
	top: 820px;
	left: 0;
	background-image: url(picture/20071129134747321_3.jpg);
	background-repeat: no-repeat;
}
#TABLE {
	position: absolute;
	width: 540px;
	z-index: 14;
	top: 50px;
	left: 50px;
	cursor: default;
	filter: Xray;
	overflow: auto;
}

#TABLE TD {
	width: 90px;
	text-align: right;
}

#TABLE TH {
	width: 90px;
}

#TABLE TR {
	height: 50px;
}

</style>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.min.js"></script>
<script type="text/javascript" src="js/jewelry.js"></script>
</head>

<body>
<div id="WORKBENCH"></div>
<div id="MATERIAL">
  <div id="Accordion1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
      <div class="AccordionPanelTab">Category: A</div>
      <div class="AccordionPanelContent">
		<img title="11" src="picture/pearl1.png" />
		<img title="22" src="picture/pearl2.png" />
		<img title="33" src="picture/pearl3.png" />
      </div>
    </div>
    <div class="AccordionPanel">
      <div class="AccordionPanelTab">Category B</div>
      <div class="AccordionPanelContent">
		<img src="picture/pendant1.png" />
		<img src="picture/pendant2.png" />
		<img src="picture/pendant3.png" />
    </div>
  </div>
</div>
</div>
<input type="submit" name="Reset" id="Reset" value="Reset" />
<input type="submit" name="Complete" id="Complete" value="Complete" />

<div id="WB_TITLE">
  <h1>Workbench</h1>
</div>
<div id="MW_TITLE">
  <h1>Material Warehouse</h1>
</div>
<div id="TITLE">
  <h1><strong>D.I.Y Studio</strong></h1>
</div>
<div id="BACKGROUND"></div>
<div id="INFORMATION">
  <table width="400" border="1" class="AccordionPanelTab" id="TABLE" name="TABLE">
    <tr class="AccordionPanelTab">
      <th scope="col">Item ID</th>
      <th scope="col">Material</th>
      <th scope="col">Quantity</th>
      <th scope="col">Unit Price</th>
      <th scope="col">Count</th>
      <th scope="col">Sub Total</th>
    </tr>
  </table>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
  </script>
</body>
</html>
